<template>
  <div style="padding-left: 10px">
   <el-row>
     <el-input v-model="syncParam.itemCode" style="width: 150px;" placeholder="请输入星座网的商品id"> </el-input>
     <el-button type="primary" size="medium" @click="syncGoods">获取商品信息</el-button>
   </el-row>
    <div v-show="showCreate">
      <el-form>
        <el-form-item label="商品编号:">
          <el-input v-model="goods.itemCode" style="width: 150px;"></el-input>
        </el-form-item>

        <el-form-item label="店铺(档口):">
          <el-input v-model="goods.storeNum" style="width: 500px;"></el-input>
        </el-form-item>

        <el-form-item label="商品标题:">
          <el-input v-model="goods.title" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="批发价">
          <div>{{piPrice}}    元</div>
        </el-form-item>

        <el-form-item label="商品顶部展示图:">
          <span>(不多于9个图片链接,多个链接换行)</span>
          <br>
          <el-input type="textarea"
                     class="textarea"
                    row="10"
                    resize="none"
                    v-model="picUrl"
                    autocomplete="off"
                    placeholder="多个链接切换行输入">
          </el-input>
        </el-form-item>
      </el-form>

      <div>
        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品参数:</div>
          <br>
          <br>
          <div style="width: 600px">
            <div v-for="(item,index) in params" style="margin: 0 0 10px 0">
              <template>
                <el-input style="width: 100px" v-model="item.name"></el-input>
                <el-input style="width: 300px" v-model="item.value"></el-input>
                <el-button @click="removeParams(index)">删除</el-button>
              </template>
            </div>
            <br>
          </div>
          <el-button @click="addModel()" style="margin:0 0 10px 10px">自定义参数</el-button>
        </div>
        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品SKU:</div>
          <br>
          <br>
          <div style="width: 600px;margin: 0 0 10px 0" v-for="(item,index) in skus">
            <template>
              <el-input style="width: 100px" v-model="item.name"></el-input>
              <el-input style="width: 300px" v-model="item.value"></el-input>
              <el-button @click="removeSku(index)">删除</el-button>
            </template>
          </div>
          <br>
          <el-button @click="addSku()" style="margin:0 0 10px 10px">添加属性</el-button>
        </div>
        <div style="background: #f9f9f9;width: 100%;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 20px 10px">
             商品详情图链接(多个链接切换行输入)
            </div>
           <br>
           <el-input class="textarea"
                     type="textarea" row="20"
                     v-model="detailUrl"
                     autocomplete="off" placeholder="多个链接切换行输入">
           </el-input>
          <div style="clear: both"></div>
        </div>

        <el-row>
          <label title="商品售价:">商品售价: </label>
          <el-input style="width: 100px" v-model="goods.discount"></el-input>
          <label  title="市场均价: ">     市场均价: </label>
          <el-input style="width: 100px" v-model="goods.price"></el-input>
          <label title="初始销量:">       初始销量: </label>
          <el-input style="width: 100px" v-model="goods.fakeSales"></el-input>
          <br>
          <br>
          <label class="row-label" title="类目"> 类目</label>
          <el-select v-model="cateId" placeholder="请选择主类目">
            <el-option v-for="item in cateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
          <el-select v-model="goods.cid" placeholder="请选择子类目">
            <el-option v-for="item in childCateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>

          <label title="运费模板">  运费模板: </label>
          <el-select v-model="goods.feeId" placeholder="请选择运费模板" style="padding-left: 30px">
            <el-option v-for="item in postData" :key="item.feeId" :label="item.name" :value="item.feeId"></el-option>
          </el-select>
        </el-row>
      </div>

      <el-button type="primary" style="margin: 50px 0 0 0" @click="goSendGoods">发布商品</el-button>
    </div>

  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, addItem, postFeeModel, selMainCate,getShiguGoods} from "../../data/service";

  export default {
    name: "",
    data() {
      return {
        goods:{//商品
          itemCode:'',
          title:'',
          price:'',//市场价格
          discount:'',//销售价格
          details:'',//详情图
          images:'',//展示图
          fakeSales: '',//假销量
          skus:'',//sku的json串
          params:'',//产品参数的字符串
          cid:'',//商品类目
          goodsNo:'',//拿货号
          storeNum:'',//档口号
          feeId:'',//运费模板id
        },
        syncParam:{
          itemCode:"",
          webSite:"hz"
        },
        showCreate:false,//展示
        picUrl:'',//主图
        detailUrl:'',//详情图
        piPrice:'',//批发价
        options: [],
        cateList: [],
        childCateList: [],
        postData:[],
        cateId: '',
        childCateId: '',
        params: [],
        skus: [],
      }
    },
    mixins: [ajax],
    created() {
      this.getRouterParam();
      this.getMainCates();
      this.getPostFeeModel();
    },

    watch: {
      cateId(){
        this.childCateList = [];
        this.cateList.forEach(item => {
          if(item.cid === this.cateId){
            this.childCateList = item.children
          }
        })
      }
    },
    methods: {
      getRouterParam(){
        let code =  this.$route.params.itemCode;
        this.syncParam.itemCode = code === undefined?"":code;
        console.log(code);
      },
      //获取商品
      syncGoods(){

        this.doajax(getShiguGoods,this.syncParam,resp=>{

          this.params = JSON.parse(resp.props);
          this.skus =JSON.parse( resp.skus);

          //
          this.detailUrl = resp.detailUrl.replace(/,/g,'\n');
          this.picUrl = resp.picUrl.replace(/,/g,'\n');

          this.piPrice = resp.piPrice;
          //把response 的值赋给 goods
          //批发价只要显示就好了
          this.goods.itemCode = resp.goodsId;
          this.goods.title = resp.title;
          this.goods.storeNum = resp.storeNum;
          this.goods.goodsNo = resp.goodsNo;
          this.goods.discount = resp.appPrice;
          this.showCreate = true;
        });
      },
      getMainCates(){
        this.doajax(selMainCate, {}, resp => {
          this.cateList = resp.data
        })
      },
      getPostFeeModel(){
        this.doajax(postFeeModel,{},(resp)=>{
          this.postData=resp.data;
        })
      },
      goSendGoods() {
        if(this.goods.itemCode===''){this.error("请输入商品编号");return}
        if(this.goods.title===''){this.error("请输入商品标题");return}
        if(this.goods.discount===''){this.error("请输入商品特价");return}
        if(this.goods.price===''){this.error("请输入商品原价");return}
        if(this.goods.fakeSales===''){this.error("请输入商品初始销量");return}
        if(this.goods.feeId===''){this.error("请运费模板");return}
        if(this.picUrl===undefined || this.picUrl ===''){
           this.error("请至少添加一张主图");
           return;
        }
        if(this.goods.cid === ''){
          this.error("请选择商品类目");
          return;
        }

        if(this.detailUrl){
           this.goods.details =  this.blankSplit(this.detailUrl);
        }

        this.goods.images= this.blankSplit(this.picUrl);

        this.goods.skus =  JSON.stringify(this.skus) ;
        this.goods.params=  JSON.stringify(this.params) ;

        this.doajax(addItem,this.goods, (resp) => {
            this.$router.push('/admin/mallList');
        })
      },
      addModel() {
        let modelParam = {name:'',value:''};
        this.params.push(modelParam);
      },
      removeParams(index) {
        this.params.splice(index, 1);
      },
      addSku() {
        let modelParam = {name:'',value:''};
        this.skus.push(modelParam);
      },
      removeSku(index) {
        this.skus.splice(index, 1);
      },
      //图片链接的过滤，对多个回车的处理
      blankSplit(str){
        if(!str){
          return "";
        }
        let a = str.split(/[\s\n]/);
        let b = [];
        for(let i = 0;i<a.length;i++){
          a[i].trim();
          if(a[i]!==undefined && a[i]!==''){
            b.push(a[i]);
          }
        }
        return b.join(",");
      }
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .mallCreate .el-input {
    width: 500px;
  }

  .afterUpload {
    float: left;
    padding-right: 20px;
  }

  .afterUpload > img {
    width: 80px!important;
    height: 80px!important;
  }

  .createImg > .afterUpload {
    padding-right: 0;
  }

  .createImgX {
    width: 30px;
    float: left;
  }
  .textarea{}
  .textarea textarea{
    width:1000px;
    height: 300px;
  }

</style>
